<template>
	<view class="loadMore">
		<view v-show="!loading">{{ loadText }}</view>
		<block v-if="loading">
			<image v-show="loading && loadImg" :src="loadImg" mode="widthFix"></image>
		</block>
	</view>
</template>

<script>
export default {
	props: ['loadText', 'imgs', 'loading'],
	data() {
		return {
			index: 0,
			type: 'pos',
			loadImg: this.imgs?this.imgs[0]:null
		};
	},
	methods: {
		loadAnimation() {
			if (this.index >= 0 && this.index < this.imgs.length - 1 && this.type === 'pos') {
				this.index++;
				if (this.index === this.imgs.length - 1) {
					this.type = 'rev';
				}
			} else {
				this.index--;
				if (this.index === 0) {
					this.type = 'pos';
				}
			}
			this.loadImg = this.imgs[this.index];
		},

		loding() {
			if (this.job) {
				clearInterval(this.job);
			}
			this.job = setInterval(() => {
				this.loadAnimation();
			}, 150);
		},
		stopLoadIng() {
			clearInterval(this.job);
		}
	},
	beforeUpdate() {
		if (this.loading) {
			this.loding();
		} else {
			this.stopLoadIng();
		}
	}
};
</script>

<style lang="less" scoped>
.loadMore {
	display: flex;
	flex-direction: row;
	justify-content: center;
	color: #aaaaaa;
	padding: 15rpx;
	image {
		width: 100rpx;
	}
}
</style>
